<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>数据供需探查 - TurboDX AI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/theme.css">
    <link rel="stylesheet" href="styles/toolbar.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 48px;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 16px 24px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .page-title {
            font-size: 24px;
            color: #1e88e5;
            margin: 0;
        }

        .back-btn {
            padding: 8px 20px;
            background: #1e88e5;
            color: white;
            border: none;
            border-radius: 6px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }

        .back-btn:hover {
            background: #1976d2;
            transform: translateY(-2px);
        }

        .main-content {
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 48px;
            margin-top: 24px;
        }

        .search-panel {
            display: flex;
            flex-direction: column;
            gap: 16px;
            background: white;
            border-radius: 12px;
            padding: 24px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-right: 24px;
        }

        .search-title {
            font-size: 18px;
            color: #333;
            margin: 0 0 12px 0;
        }

        .search-description {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 20px;
        }

        .search-form {
            background: var(--background-secondary);
            padding: 20px;
            border-radius: 8px;
            width: 100%;
            box-sizing: border-box;
        }

        .form-group {
            margin-bottom: 16px;
            width: 100%;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #333;
        }

        .form-label.required::after {
            content: '*';
            color: #f44336;
            margin-left: 4px;
        }

        .select-wrapper {
            position: relative;
        }

        .select-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            pointer-events: none;
        }

        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            background: #fff;
            transition: all 0.3s;
            box-sizing: border-box;
        }

        textarea.form-control {
            line-height: 1.5;
            font-family: inherit;
        }

        .form-control:focus {
            border-color: #1e88e5;
            box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.1);
            outline: none;
        }

        .checkbox-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .custom-checkbox {
            width: 16px;
            height: 16px;
            margin: 0;
            cursor: pointer;
        }

        .search-btn {
            width: 100%;
            height: 40px;
            margin-top: 4px;
            background: #1e88e5;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .search-btn:hover {
            background: #1976d2;
        }

        .assistant-panel {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 24px;
            display: flex;
            flex-direction: column;
            margin-left: 24px;
        }

        .ai-response {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px;
            text-align: center;
        }

        .ai-icon {
            font-size: 48px;
            color: #1e88e5;
            margin-bottom: 20px;
        }

        .ai-message {
            font-size: 20px;
            color: #333;
            margin-bottom: 8px;
        }

        .ai-submessage {
            font-size: 14px;
            color: #666;
        }

        .keyword-search {
            width: 100%;
            display: flex;
            gap: 8px;
            align-items: flex-start;
        }

        .keyword-search .search-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 14px;
            background: #fff;
            transition: all 0.3s;
            box-sizing: border-box;
            line-height: 1.5;
            font-family: inherit;
        }

        .keyword-search .search-btn {
            width: 100%;
            margin: 0;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .search-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #666;
            font-size: 14px;
            margin: 8px 0;
        }

        .search-divider::before,
        .search-divider::after {
            content: "";
            flex: 1;
            height: 1px;
            background: #e0e0e0;
        }

        .search-top {
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid #e0e0e0;
        }

        @keyframes highlight {
            0% {
                background-color: var(--primary-color-light);
            }

            100% {
                background-color: white;
            }
        }

        .highlight {
            animation: highlight 0.3s ease-out;
        }

        .search-buttons {
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
        }

        .example-btn {
            width: 100%;
            margin: 0;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .example-btn:hover {
            background: var(--primary-color-dark);
        }

        .example-btn.active {
            background: var(--primary-color-dark);
        }

        /* 搜索示例弹出层 */
        .search-examples-popup {
            position: absolute;
            right: 0;
            top: 100%;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
            width: 400px;
            max-height: 80vh;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            padding: 20px;
            margin-top: 8px;
        }

        .search-examples-popup.active {
            display: block;
        }

        .popup-header {
            margin-bottom: 16px;
        }

        .popup-header h3 {
            font-size: 18px;
            color: var(--text-primary);
            margin: 0 0 8px 0;
        }

        .popup-header p {
            font-size: 14px;
            color: var(--text-secondary);
            margin: 0;
        }

        .search-examples {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .example-card {
            background: var(--background-secondary);
            border-radius: 8px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .example-card:hover {
            background: var(--background-secondary-dark);
            transform: translateY(-2px);
        }

        .example-title {
            font-size: 16px;
            color: var(--primary-color);
            margin: 0 0 8px 0;
        }

        .example-text {
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <header class="page-header">
            <h1 class="page-title">数据供需探查</h1>
            <a href="dashboard.html" class="back-btn">
                <i class="fas fa-arrow-left"></i>
                返回首页
            </a>
        </header>

        <main class="main-content">
            <div class="search-panel">
                <h2 class="search-title">数据供需探查</h2>
                <p class="search-description">在指定范围内，寻找含有指定字段的数据资源</p>

                <div class="search-form">
                    <div class="form-group">
                        <label class="form-label">搜索范围（可选）</label>
                        <div class="select-wrapper">
                            <select class="form-control" name="department">
                                <option value="">数据所属部门</option>
                                <option value="部门一">部门一</option>
                                <option value="部门二">部门二</option>
                                <option value="部门三">部门三</option>
                            </select>
                            <i class="fas fa-chevron-down select-icon"></i>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label required">需求数据字段</label>
                        <textarea class="form-control" name="requiredFields" placeholder="身份证、地址、姓名" required rows="3"
                            style="height: auto; min-height: 80px; resize: vertical;">
                        </textarea>
                    </div>

                    <div class="form-group">
                        <div class="checkbox-wrapper">
                            <input type="checkbox" id="linkFields" class="custom-checkbox">
                            <label for="linkFields">可通过关联字段整合</label>
                        </div>
                        <input type="text" class="form-control" name="linkFields" placeholder="关联字段"
                            style="display: none;">
                    </div>

                    <button type="button" class="search-btn" onclick="constructPrompt()">
                        <i class="fas fa-search"></i>
                        构造提示词
                    </button>
                </div>
            </div>

            <div class="assistant-panel">
                <div class="search-top">
                    <div class="keyword-search">
                        <textarea class="search-input" placeholder="请输入关键词搜索..." rows="3"
                            style="height: auto; min-height: 80px; resize: vertical;"></textarea>
                        <div class="search-buttons">
                            <button type="button" class="search-btn">
                                <i class="fas fa-search"></i>
                                搜索
                            </button>
                            <button type="button" class="example-btn" onclick="showSearchExamples(this)">
                                <i class="fas fa-lightbulb"></i>
                                提示词样例
                            </button>
                            <!-- 提示词样例弹出层 -->
                            <div class="search-examples-popup">
                                <div class="popup-header">
                                    <h3>提示词搜索示例</h3>
                                    <p>以下是一些常用的提示词搜索样例，供您参考</p>
                                </div>
                                <div class="search-examples"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ai-response">
                    <div class="ai-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="ai-message">Hi，我是您的AI助手</div>
                    <div class="ai-submessage">请输入关键词，我来帮您查找相关信息</div>
                </div>
            </div>
        </main>
    </div>

    <script src="scripts/toolbar.js"></script>
    <script>
        function showSearchComposer() {
            // 实现合成搜索弹窗逻辑
        }

        // 初始化主题
        function initTheme() {
            const savedTheme = localStorage.getItem('selected-theme');
            if (savedTheme) {
                document.body.setAttribute('data-theme', savedTheme);
            }
        }

        // 页面加载时初始化主题
        document.addEventListener('DOMContentLoaded', function () {
            initTheme();

            // 添加关联字段复选框事件监听
            const linkFieldsCheckbox = document.getElementById('linkFields');
            const linkFieldsInput = document.querySelector('input[name="linkFields"]');

            linkFieldsCheckbox.addEventListener('change', function () {
                linkFieldsInput.style.display = this.checked ? 'block' : 'none';
                if (!this.checked) {
                    linkFieldsInput.value = '';
                }
            });
        });
    </script>
</body>

</html>